<template>
    <div>
        <div class="footer mgt40">
            <div class="ftadCon">
                <div class="footer-container">
                    <ul class="ftad fix">
                        <li>
                            <a target="_blank" id="dafaCloud" href="http://www.yifacloud.com/"><p>技术支持<i>Technical support</i></p>
                                <div class="technicalSupport fix">
                                    <div class="technicalSupport-box">
                                        <img src="https://066981.com/themes/simpleboot3/public/assets/images/dafayun.png">
                                        <p>
                                            易发云
                                            <br> 彩票系统平台
                                        </p> <i></i>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li><p>服务体验<i>Service experience</i></p>
                            <ul class="serviceExperience">
                                <li>昨日充值平均时间
                                    <p class="footBar"><span id="progress1" style="width: 20%;"></span></p> <em><em id="mMin1">2</em>'<em id="mSec1">50</em></em><i>秒</i></li>
                                <li>昨日提现平均时间
                                    <p class="footBar"><span id="progress2" style="width: 70%;"></span></p> <em><em id="mMin2">7</em>'<em id="mSec2">44</em></em><i>秒</i></li>
                            </ul>
                        </li>
                        <li><p>充值方式<i>Recharge method</i></p>
                            <div class="rechargeMethod"><i class="wechat"></i><i class="alipay"></i><i class="cup"></i></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <copyright />
    </div>
</template>
<script>
import copyright from "@/components/home/copyRight"
export default {
    name: 'homeFooter',
    data(){
        return{

        }
    },
    components:{
        copyright
    }
}
</script>
<style scoped>
.footer {
    width: 100%;
    overflow: hidden;
    background: #f8f8f8;
    box-sizing: border-box;
}
.ftadCon {
    border-left: none;
    border-right: none;
    height: 160px;
}
.footer .footer-container {
    height: 100px;
}
.footer-container {
    width: 1000px;
    margin: 0 auto;
}
.ftad {
    padding: 20px 0;
}
.ftad > li:first-child {
    width: 305px;
    padding-left: 0;
}
.ftad > li:nth-child(2) {
    width: 368px;
}
.ftad > li + li {
    border-left: 1px solid #ebebeb;
}
.ftad > li {
    float: left;
    padding-left: 20px;
    height: 118px;
}
.ftad > li p {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}
.ftad > li p i {
    font-size: 14px;
    margin-left: 10px;
    font-weight: 100;
    color: #b8b8b8;
}
.technicalSupport {
    margin: 32px 0;
    position: relative;
    overflow: hidden;
}
.technicalSupport img {
    float: left;
    width: 70px;
    height: 47px;
}
.technicalSupport p {
    float: left;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 15px !important;
    line-height: 1.9;
}
.technicalSupport i {
    background: -webkit-linear-gradient(left, hsla(0, 0%, 97%, 0), hsla(0, 0%, 97%, .66) 50%, hsla(0, 0%, 97%, 0));
    position: absolute;
    overflow: hidden;
    width: 40px;
    height: 100px;
    transform: rotate(17deg);
    left: -45px;
    top: -10px;
}
.footBar {
    background: #e6e6e6;
    width: 120px;
    height: 15px;
    border-radius: 15px;
    position: relative;
    display: inline-block;
    vertical-align: sub;
    margin-left: 5px !important;
    overflow: hidden;
}
.serviceExperience li:nth-child(2) span {
    background: #4aa9db;
    color: #fff;
}
.serviceExperience i {
    color: #a6a6a6;
    margin-left: 5px;
}
.footBar span {
    background-color: #fd5757;
    position: absolute;
    left: 0;
    height: 15px;
    border-radius: 15px 0 0 15px;
}
.serviceExperience em {
    font-size: 26px;
    margin-left: 5px;
}
.rechargeMethod {
    margin: 30px 0;
}
.rechargeMethod i {
    display: inline-block;
    background: url(https://066981.com/themes/simpleboot3/public/assets/images/rechargeMethod.png) no-repeat;
    height: 40px;
    width: 57px;
    margin-right: 11px;
    background-size: 57px;
}
.rechargeMethod .alipay {
    background-position: 0 -40px !important;
}
.rechargeMethod .cup {
    background-position: 0 -80px !important;
    margin-right: 0;
}
</style>

